<template>
    <div>
        <div class="products" :class="[item&&item.props&&item.props.layout||'c2']"
             v-if="item&&item.props&&item.props.products.length">
            <div class="producItem" v-for="product in item&&item.props&&item.props.products" :key="product.id">
                <div class="imageContainer">
                    <img src="http://qiniu.liumingtai.com/157707089201301736.png"/>
                </div>
                <div class="padding-top-bottom-5 fontsize  text-2row-overflow">
                    {{product.name}}
                </div>
                <div class="space-between">
                    <div>
                        <span class="fontsize">￥{{product.price}}</span>
                        <span class="padding-left-5 line-through grey sub-small" v-if="product.subPrice">￥{{product.subPrice}}</span>
                    </div>
                    <div>
                        <i class="iconfont icon-shopcart"></i>
                    </div>
                </div>
            </div>
        </div>

        <div style="" class="flex-c flex-r" v-else>
            请添加商品
        </div>
    </div>

</template>
<script>

    import {createProp} from "../util/util";

    export default {
        props: {
            item: createProp([Object])
        },
        data() {
            return {}
        }
    }
</script>
<style lang="scss" scoped>
    .c2 {
        display: flex;
        flex-wrap: wrap;

        & > div {
            box-sizing: border-box;

            img {
                max-height: 100%;
                max-width: 100%;
            }
        }

        & > div {
            width: 50%;

            &:nth-child(2n+1) {
                padding-right: 5px;
            }

            &:nth-child(2n+2) {
                padding-left: 5px;
            }

        }

    }
</style>
